<template>
  <div class="outside-content">
    <div class="title">
      <el-image :src="creditLogo" fit="fill"/>
      <span>{{ title }}</span>
    </div>
    <div class="main-content">
      <div class="main-content-item" v-for="(item, index) of dataList" :style="{
        background: `linear-gradient( 270deg, rgba(1,114,189,0) 0%, ${colors[index]} 100%)`,
      }">
        <div class="child-item" v-for="itemChild of item">
          <div class="child-item-text">{{itemChild.label}}<span :style="valueColors(dataInfo[itemChild.valueKey])">{{dataInfo[itemChild.valueKey] || '--'}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, computed } from 'vue'
import creditLogo from '@/assets/img/enterpriseCreditAnalysis/credit-logo.png'

const props = defineProps({
  dataList: {
    type: Array,
    default: () => ([])
  },
  dataInfo: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: ''
  }
})

const valueColors = computed(() => {
  return (res) => {
    switch(res) {
      case '高':
        return { color: '#5CC40C' }
      case '中':
        return { color: '#F0C34B' }
      case '低':
        return { color: '#C41E0C' }
      default:
        return { color: 'white' }
    }
  }
})

const colors = ref(['#109C9E', '#105A97', '#C87822'])
</script>

<style scoped lang="less">
.outside-content {
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .el-image {
      width: 28px;
      height: 28px;
    }
    span {
      font-size: 24px;
      line-height: 24px;
      margin-left: 8px;
      background: linear-gradient(to bottom, #FFFFFF, #0072BD);
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
    }
  }
  .main-content {
    .main-content-item {
      display: flex;
      border-radius: 10px;
      padding-left: 36px;
      box-sizing: border-box;
      .child-item {
        margin-right: 20px;
        height: 56px;
        display: flex;
        align-items: center;
        font-size: 24px;
      }
    }
    .main-content-item:not(:last-child) {
      margin-bottom: 17px;
    }
  }
}
</style>